<template>
    <el-button v-nomoreClick v-if="props.type" v-bind="$attrs" :icon="props.icon || iconName" :type="autoType"
        :class="props.expandType" :size="props.size" :title="props.title || state.contentText">
        <slot>
            {{ props.title || state.contentText }}
        </slot>
    </el-button>
    <el-link v-else v-bind="$attrs" class="icon-link" :underline="false" :type="autoType"
        :title="props.title || state.contentText">
        <slot>
            <el-icon v-if="state.isFontSize">
                <component :is="iconName" />
            </el-icon>
            <svg-icon v-else :icon-class="iconName" />
        </slot>
    </el-link>
</template>

<script>
export default {
    name: "MyButton"
}
</script>
  
<script setup>
import { reactive, computed, shallowRef, toRaw } from 'vue'
import { ElButton } from 'element-plus'
import 'element-plus/es/components/button/style/css'
import {
    Stamp,
    Delete,
    Plus,
    Edit,
    Refresh,
    Search,
    Download,
    Upload,
    View,
    SwitchButton,
    RefreshLeft,
    Printer,
    Lock,
    Close,
    CircleCheck,
    FolderChecked,
    Tools,
    CircleClose,
    Document,
    DocumentCopy,
    Position,
    Operation
} from '@element-plus/icons-vue'
const props = defineProps({
    type: {
        // 正常按钮
        type: String,
        default: ''
    },
    expandType: {
        // 拓展类型，只有type 为text时有效，用来区分text各个状态下的文字颜色
        type: String,
        default: ''
    },
    icon: {
        // 图标按钮
        type: String,
        default: ''
    },
    title: {
        // 提示title
        type: [String, Number],
        default: ''
    },
    size: {
        type: String,
        default: ''
    }
})
const state = reactive({
    contentText: '',
    isFontSize: false,
    operationTypeArr: [
        { type: 'default', title: '', eleType: '' },
        { type: 'search', title: '查询', eleType: 'primary', icon: Search },
        { type: 'submit', title: '提交', eleType: 'primary', icon: FolderChecked },
        { type: 'save', title: '保存', eleType: 'primary', icon: FolderChecked },
        { type: 'import', title: '导入', eleType: 'primary', icon: Upload },
        { type: 'export', title: '导出', eleType: 'primary', icon: Download },
        { type: 'template', title: '模板下载', eleType: 'primary', icon: Download },
        { type: 'sure', title: '确定', eleType: 'primary', icon: CircleCheck },
        { type: 'audit', title: '审核', eleType: 'primary', icon: Stamp },
        { type: 'batchAudit', title: '批量审核', eleType: 'primary', icon: Stamp },
        { type: 'other', title: '其他', eleType: 'primary' },
        { type: 'add', title: '新增', eleType: 'add', icon: Plus },
        { type: 'edit', title: '修改', eleType: 'warning', icon: Edit },
        { type: 'review', title: '复审', eleType: 'warning', icon: Stamp },
        { type: 'delete', title: '删除', eleType: 'danger', icon: Delete },
        { type: 'batchDelete', title: '批量删除', eleType: 'danger', icon: Delete },
        { type: 'cancel', title: '取消', eleType: 'danger', icon: Close },
        { type: 'disable', title: '禁用', eleType: 'danger', icon: Lock },
        { type: 'print', title: '打印', eleType: 'primary', icon: Printer },
        { type: 'reset', title: '重置', eleType: '', icon: Refresh },
        { type: 'close', title: '关闭', eleType: '', icon: SwitchButton },
        { type: 'detail', title: '查看', eleType: 'primary', icon: View },
        { type: 'back', title: '返回', eleType: '', icon: RefreshLeft }
    ],
    iconArr: [
        // ElementPlus 字体图标
        {
            icon: 'add',
            title: '新增',
            iconSvg: Plus,
            isFontSize: true,
            eleType: 'primary'
        },
        {
            icon: 'edit',
            title: '修改',
            iconSvg: Edit,
            isFontSize: true,
            eleType: 'warning'
        },
        {
            icon: 'delete',
            title: '删除',
            iconSvg: Delete,
            isFontSize: true,
            eleType: 'danger'
        },
        {
            icon: 'detail',
            title: '详情',
            iconSvg: View,
            isFontSize: true,
            eleType: 'primary'
        },
        {
            icon: 'upload',
            title: '上传',
            iconSvg: Upload,
            isFontSize: true,
            eleType: 'success'
        },
        {
            icon: 'preview',
            title: '预览',
            iconSvg: View,
            isFontSize: true,
            eleType: 'primary'
        },
        {
            icon: 'lookover',
            title: '查看',
            iconSvg: View,
            isFontSize: true,
            eleType: 'primary'
        },
        {
            icon: 'setting',
            title: '设置',
            iconSvg: Tools,
            isFontSize: true,
            eleType: 'warning'
        },
        {
            icon: 'config',
            title: '配置',
            iconSvg: Tools,
            isFontSize: true,
            eleType: 'primary'
        },
        {
            icon: 'sure',
            title: '确认',
            iconSvg: FolderChecked,
            isFontSize: true,
            eleType: 'success'
        },
        {
            icon: 'document',
            title: '资料',
            iconSvg: Document,
            isFontSize: true,
            eleType: 'primary'
        },
        {
            icon: 'signing',
            title: '签约',
            iconSvg: FolderChecked,
            isFontSize: true,
            eleType: 'primary'
        },
        {
            icon: 'stop',
            title: '停止',
            iconSvg: CircleClose,
            isFontSize: true,
            eleType: 'danger'
        },
        {
            icon: 'print',
            title: '打印',
            iconSvg: Printer,
            isFontSize: true,
            eleType: 'primary'
        },
        {
            icon: 'copy',
            title: '复制',
            iconSvg: DocumentCopy,
            isFontSize: true,
            eleType: 'primary'
        },
        {
            icon: 'send',
            title: '发送',
            iconSvg: Position,
            isFontSize: true,
            eleType: 'primary'
        },
        {
            icon: 'operation',
            title: '操作',
            iconSvg: Operation,
            isFontSize: true,
            eleType: 'primary'
        },

        //  SVG图标 命名好存储在 icons/svg
        { icon: 'save', title: '保存', iconSvg: 'save', eleType: 'primary' },
        { icon: 'submit', title: '提交', iconSvg: 'save', eleType: 'primary' },
        {
            icon: 'maintenance',
            title: '维护',
            iconSvg: 'maintenance',
            eleType: 'warning'
        },
        { icon: 'audit', title: '审核', iconSvg: 'audit', eleType: 'primary' },
        { icon: 'review', title: '复审', iconSvg: 'audit', eleType: 'warning' },
        {
            icon: 'cancelAudit',
            title: '取消审核',
            iconSvg: 'cancel',
            eleType: 'danger'
        },
        { icon: 'export', title: '导出', iconSvg: 'export', eleType: 'primary' },
        { icon: 'cancel', title: '取消', iconSvg: 'cancel', eleType: 'danger' },
        {
            icon: 'personnel',
            title: '人员',
            iconSvg: 'personnel',
            eleType: 'primary'
        },
        { icon: 'lock', title: '锁定', iconSvg: 'lock', eleType: 'danger' },
        { icon: 'report', title: '报表', iconSvg: 'report', eleType: 'primary' },
        {
            icon: 'calculate',
            title: '计算',
            iconSvg: 'calculate',
            eleType: 'primary'
        },
        { icon: 'logo', title: '日志', iconSvg: 'log', eleType: 'primary' }
    ]
})

// 计算按钮的类型
const autoType = computed(() => {
    if (props.type) {
        return operationTypeHandle()
    } else if (props.icon) {
        return iconTypeHandle()
    } else {
        return ''
    }
})

const iconName = shallowRef('')
// 普通按钮
const operationTypeHandle = () => {
    const typeObj = state.operationTypeArr.find(
        (item) => props.type === item.type
    )
    if (typeObj) {
        state.contentText = typeObj.title
        iconName.value = toRaw(typeObj.icon) 
        return typeObj.eleType
    } else {
        return props.type
    }
}

// 列表操作图标按钮
const iconTypeHandle = () => {
    const iconObj = state.iconArr.find((item) => props.icon === item.icon)
    if (iconObj) {
        state.contentText = iconObj.title
        iconName.value = toRaw(iconObj.iconSvg)
        state.isFontSize = iconObj.isFontSize
        return iconObj.eleType
    } else {
        state.contentText = '未知功能图标'
        return props.type
    }
}
//按钮禁用指令，点击禁用1s
const vNomoreClick = {
    created: function (el, binding, vnode) {
        if (vnode.parent && vnode.parent.data && vnode.parent.data.attrs && vnode.parent.data.attrs.disabled) {
            return
        }
        el.addEventListener('click', e => {
            el.classList.add('is-disabled')
            vnode.disabled = true
            setTimeout(() => {
                el.disabled = false
                el.classList.remove('is-disabled')
            }, 1000)
        })
    }
}
</script>
  
<style lang="scss" scoped>
.icon-link {
    width: 20px;
    height: 20px;
    font-size: 18px !important;

    &+.icon-link {
        margin-left: 5px;
    }

    &.is-disabled {
        pointer-events: none;
    }
}

.icon-button {
    padding: 0 !important;
    border: 0;
    color: #fff;
    width: 20px;
    height: 20px;

    &.is-disabled {
        pointer-events: none;
    }
}

.el-button--add {
    color: #ffffff;
    background-color: #67c23a;
    border-color: #67c23a;

    &:active {
        background-color: #61a53f;
        border-color: #61a53f;
    }

    &:hover {
        background-color: #61a53f;
        border-color: #61a53f;
    }

    &:focus {
        background-color: #61a53f;
        border-color: #61a53f;
    }

    &.is-disabled {
        color: #ffffff;
        background-color:  mix(#fff, #67c23a, 70%);
        border-color:  mix(#fff, #67c23a, 70%);
    }
}

:deep(.el-button--text) {
    color: #636363 !important;

    &:hover {
        color: #384480 !important;
    }

    &.primary {
        color: #384480 !important;

        &:hover {
            color:  mix(#ffffff, #384480, 80%) !important;
        }
    }

    &.success {
        color: #67c23a !important;

        &:hover {
            color: mix(#ffffff, #67c23a, 80%) !important;
        }
    }

    &.warning {
        color: #e6a23c !important;

        &:hover {
            color: mix(#ffffff, #e6a23c, 80%) !important;
        }
    }

    &.danger {
        color: #f56c6c !important;

        &:hover {
            color: mix(#ffffff, #f56c6c, 80%) !important;
        }
    }

    &.add {
        color: #67c23a !important;

        &:hover {
            color:  mix(#fff, #67c23a, 70%) !important;
        }
    }

    &.del {
        color: #ff7f52 !important;

        &:hover {
            color:  mix(#fff, #ff7f52, 70%) !important;
        }
    }
}
</style>
  